<template>
  <div class="loginTab">
    <el-card class="box-card">
      <div style="line-height: 40px;border-bottom: #ccc 1px solid;margin-bottom:20px ">登录</div>
      <div>
        <el-form inline :rules="loginRule" ref="loginForm" :model="user">
          <el-form-item label="账号" prop="account">
            <!--   v-model 双向绑定 输入信息的时候，自动修改user.account属性，反之亦然 -->
            <el-input v-model="user.account" clearable></el-input>
          </el-form-item>
          <br>
          <el-form-item label="密码" prop="password">
            <!--   v-model 双向绑定 输入信息的时候，自动修改user.account属性，反之亦然 -->
            <el-input v-model="user.password" show-password clearable></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="login" style="width: 256px">登录</el-button>
        <el-button type="text" @click="$router.push('/register')">没有账号？去注册</el-button>
      </div>
    </el-card>
    <div style="position: absolute">
      <h2>后台 ：/admin   acc:admin  pwd:admin</h2>
    </div>
  </div>

</template>

<script>

export default {
  name: "login",
  data(){
    return{
      user:{},
      loginRule:{
        account:[
          {required:true,message: '请输入账号', trigger: 'blur'},
        ],
        password:[
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
        login(){
          this.$refs.loginForm.validate((r) => {
            if (r) {
              this.$axios.post("/api/customer/login", this.user).then(res => {
                if (res.data.status === 1) {
                  localStorage.setItem("TOKEN", res.data.data.token);
                  this.$message.warning(res.data.msg);
                  this.$router.push("/homePage");
                }else {
                  this.$message.warning(res.data.msg);
                }
              })
            } else {
              this.$message.error('请填写完整信息');
            }
          })
        }
  }
}
</script>
<style>

</style>
<style scoped>
.loginTab{
  background-image: url("../assets/img/logintg.jpg");
  width: 1200px;
  height: 562px;
  margin: auto;
  position: relative;
}
.box-card{
  width: 400px;
  position: absolute;
  right: 98px;
  top: 29px;
  background-color: rgba(255,0255,255,0.3);
}
</style>